<template>
	<div class="manage">
		<el-dialog :title="operateType === 'add' ? '新增栏目' : '更新栏目'" :visible.sync="isShow" width="680px">
			<el-form model="operateForm" inline="inline"  label-width="100px">
			<el-form-item label="上级栏目">
			  <treeselect style="width: 500px;"
			    v-model="operateForm.pid"
			    :options="kindOptions"
			    :normalizer="normalizer"
				:show-count="true"
			    placeholder="选择上级栏目"
			  />
			</el-form-item>
			<el-form-item label="栏目名称">
				<el-input placeholder="请输入栏目名称" v-model="operateForm.kindName"></el-input>
			</el-form-item>
	
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirm">确定</el-button>
				<el-button @click="isShow = false">取消</el-button>
			</div>
		</el-dialog>
		<div class="manage-header">
			<el-form style="width: 100%;" label-width="100px" :model="searchForm" ref="sform" inline>
				<el-button type="success" plain @click="addHandler(0)" size="mini">+ 新增</el-button>
				<el-button type="warning" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll">展开/折叠</el-button>
				<div style="float: right;">
					<el-form-item label="栏目名称">
						<el-input size="mini" v-model="searchForm.kindName" placeholder="请输入栏目名称" clearable></el-input>
					</el-form-item>
					<el-button size="mini" style="vertical-align: sub;" type="primary" @click="getList(searchForm.kindName)">搜索</el-button>
				</div>
			</el-form>
		</div>
		<el-table
		  v-if="refreshTable"
		  :data="tableData"
		  row-key="id"
		  :default-expand-all="isExpandAll"
		  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
		>
		<el-table-column prop="kindName" label="栏目名称" :show-overflow-tooltip="true" min-width="60%"></el-table-column>
		<el-table-column label="操作" align="center" min-width="40%">
		    <template slot-scope="scope">
				 <el-button 
					size="mini"
					type="text"
					icon="el-icon-edit"
					@click="handleUpdate(scope.row)"
				  >修改</el-button>
				  <el-button
					size="mini"
					type="text"
					icon="el-icon-plus"
					@click="handleAdd(scope.row)"
				  >新增</el-button>
				  <el-button
					size="mini"
					type="text"
					icon="el-icon-delete"
					@click="handleDelete(scope.row)"
				  >删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
	</div>
</template>

<script>
	import CommonForm from '/src/components/CommonForm.vue'
	import CommonTable from '/src/components/CommonTable.vue'
	import { listKind,addKind,updateKind,delKind } from '/api/kind.js'
	import Treeselect from "@riophae/vue-treeselect";
	import "@riophae/vue-treeselect/dist/vue-treeselect.css";
	import { handleTree } from '/utils/listUtils.js'

	export default {
		name: 'Kind',
		components:{
			CommonForm,
			CommonTable,
			Treeselect
		},

		data(){
			return {
				operateType: 'add',
				isShow: false,
				operateForm:{
					pid: 0,
					kindName: '',
				},
				searchForm:{
					kindName: '',
				},
				// 是否展开，默认全部折叠
				isExpandAll: false,
				// 重新渲染表格状态
				refreshTable: true,
				// 栏目树选项
				kindOptions: [],
				tableData: [],
			
			}
		},
		methods:{
			//后台返回的menu表格数据转换为TreeList树形列表数据
			kindTreeData(list){
				function getChildKind(item,list){
					let sublist = list.filter(s=>{
						if(s.pid != item.id) return false
						return true
					})
					// console.log(JSON.stringify(item) + ' 子节点数：' + sublist.length)
					if(sublist.length>0)
					{
						sublist.forEach(t=>{
							getChildKind(t,list)
						})
						item.children = sublist
						// console.log(JSON.stringify(item),'添加完节点后')
					}
				}
				let r = []
				list.forEach(t=>{
					if(t.pid == 0 && t.kindName != '首页'){
						getChildKind(t,list)
						r.push(t)
					}
				})
				// console.log(JSON.stringify(r),'最终结果')
				if(r.length == 0){
					r = list
				}
				return r;
			},
			getList(kindName=''){
				listKind({
					kindName: kindName
				}).then( res =>{
					let data = res.data;
					// console.log(data.data)
					this.tableData = this.kindTreeData(data.data)
				})
			},
			addHandler(pid=0){
				this.getTreeselect()
				this.isShow = true
				this.operateType = 'add'
				this.operateForm = {
					kindName: '',
					pid: pid
				}
			},
			confirm(){
				if(this.operateType === 'edit'){
					updateKind(this.operateForm).then(res => {
						this.isShow=false
						this.getList()
					})
				}
				else{
					addKind(this.operateForm).then(res => {
						this.isShow=false
						this.getList()
					})
				}
			},
			normalizer(node) {
			  if (node.children && !node.children.length) {
			    delete node.children;
			  }
			  return {
			    id: node.id,
			    label: node.kindName,
			    children: node.children
			  };
			},
			getTreeselect() {
			  listKind().then(response => {
					this.kindOptions = [];
					const kind = { id: 0, kindName: '主类目', children: [] };
					kind.children = handleTree(response.data.data, "id","pid","children");
					this.kindOptions.push(kind);
					// alert(JSON.stringify(this.kindOptions))
			  });
			},
			handleAdd(row){
				this.getTreeselect();
				this.addHandler(row.id)
			},
			handleUpdate(row){
				this.isShow = true
				this.operateType = 'edit'
				this.operateForm = row
				this.getTreeselect();
			},
			handleDelete(row){
				this.$confirm("即将删除该栏目，是否继续？", "提示",{
					confirmButtonText: "确认",
					cancelButtonText: "取消",
					type: "warning"
				}).then(()=>{
					const id = row.id
					delKind(id).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功'
						})
						this.getList()
					})
				})
			},
			toggleExpandAll() {
			  this.refreshTable = false;
			  this.isExpandAll = !this.isExpandAll;
			  this.$nextTick(() => {
			    this.refreshTable = true;
			  });
			},
		},
		created(){
			this.getList()
		}
	}
</script>

<style>
</style>
